<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="toadd">
        <i class="el-icon-plus"></i>新建素材
      </el-button>
    </div>
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">素材编号</div>
        <el-input style="width:250px;" v-model="seachParam.code"></el-input>
      </div>
      <div class="listitem">
        <div class="itemname">素材名称</div>
        <el-input style="width:250px;" v-model="seachParam.name"></el-input>
      </div>
      <div class="listitem">
        <div class="itemname">有效日期</div>
        <el-date-picker
          v-model="value1"
          style="width:250px;"
          type="daterange"
          @change="change"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="listitem">
        <div class="itemname">广告主</div>
        <el-input style="width:250px;" v-model="seachParam.advertiser"></el-input>
      </div>
      <div class="listitem">
        <div class="itemname">品牌</div>
        <el-input style="width:250px;" v-model="seachParam.brand"></el-input>
      </div>
      <div class="listitem">
        <div class="itemname">状态</div>
        <el-select v-model="seachParam.status" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left:20px;" @click.native="seachlist">搜索</el-button>
      </div>
    </div>
    <div class="seachwarp">
      <div class="infoitem" v-for="(item,index) in list" :key="index">
        <div class="infoleft">
          <img alt="素材图片" :src="item.file_path">
        </div>
        <div class="inforight">
          <div class="row1">
            <div class="row1item">
              <div class="row1name">素材编号:</div>
              <div class="row1text">{{item.code}}</div>
            </div>
            <div class="row1item" style="width:50%;">
              <div class="row1name">素材名称:</div>
              <div class="row1text">{{item.name}}</div>
            </div>
          </div>
           <div class="row1">
            <div class="row1item" style="width:70%;">
              <div class="row1name">素材描述:</div>
              <div class="row1text" style="flex:1;">{{item.remark}}</div>
            </div>
            
          </div>
           <div class="row1">
            <div class="row1item">
              <div class="row1name">广告主:</div>
              <div class="row1text">{{item.get_media_up?item.get_media_up.name:''}}</div>
            </div>
            <div class="row1item" >
              <div class="row1name">品牌:</div>
              <div class="row1text">{{item.get_brand?item.get_brand.name:''}}</div>
            </div>
             <div class="row1item" >
              <div class="row1name">有效期:</div>
              <div class="row1text">{{item.begin_time+'~'+item.end_time}}</div>
            </div>
          </div>
           <div class="row1">
            <div class="row1item">
              <div class="row1name">状态:</div>
              <div class="row1text">{{item.status==1?'草稿':'提交审核'}}</div>
            </div>
            <div class="row1item" >
              <div class="row1name">上传时间:</div>
              <div class="row1text">{{item.created_at}}</div>
            </div>
             <div class="row1item" >
              <el-button type="text"> 编辑</el-button>
              <el-button type="text"> 下载素材</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="setpage"
      :current-page.sync="seachParam.page"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="alltotal">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
<script>
import {getMaterial} from '@/api/read_and_edit.js'
import {SETDATE} from '../../api/System.js'
export default {
  data() {
    return {
      value1: [],
      currentPage1:1,
      list:[],
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      statusList:[
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "草稿"
        },
        {
          value: "2",
          label: "待审批"
        },
        {
          value: "3",
          label: "正常"
        }

      ],
      //
      alltotal:0,
      seachParam:{
        per:10,
        page:1,
        
        code:'',
        name:'',
        brand:'',
        advertiser:'',
        status:'',
        begin_time:'',
        end_time:''
      }
    };
  },
  created() {
    this.getlist()
  },
  methods: {
    change(e){
   console.log(e)
   this.seachParam.begin_time=new Date(e[0]).getTime()/1000
   this.seachParam.end_time=new Date(e[1]).getTime()/1000
    },
    //点击查询
    seachlist(){
      this.seachParam.page=1
      this.alltotal=0
      this.getlist()
    console.log(this.seachParam)
    },
    //设置素材列表页数
    setpage(e){
    this.seachParam.page=e
    this.getlist()
    },
    //获取素材管理列表
    getlist(){
    getMaterial(this.seachParam).then(res=>{
    console.log(res)
    if(res.code==200){
      this.alltotal=res.data.total
      this.seachParam.page=res.data.current_page
      this.list=res.data.data
      this.list.forEach(element => {
        element.created_at=SETDATE(element.created_at)
        element.begin_time=SETDATE(element.begin_time)
        element.end_time=SETDATE(element.end_time)
      });
    }
    })
    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },
    toadd(){
    this.$router.push({
      path:'/add_material'
    })
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.seachwarp{
  width: 97%;
  margin: 0 auto;
  .infoitem{
    width: 95%;
    height: 190px;
    margin: 0 auto;
    // background: red;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(225, 225, 232);
    .infoleft{
      width: 300px;
      height: 170px;
      // background: blue;
      
      img{
        width: 300px;
      height: 170px;
      }
    }
    .inforight{
      flex: 1;
      height: 170px;
      .row1{
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .row1item{
          width: 33%;
          display: flex;
          .row1name{
            font-weight: 650px;
            font-size: 16px;
            padding: 0 10px;
          }
          .row1text{
            font-weight: 400;
            font-size: 14px;
            flex: 1;
          }
        }
      }
    }
  }
}
.block{
  float: right;
}
</style>